import React, { useState } from 'react';
import { Card, Tag, Tooltip, Button, Space } from 'antd';
import { EditOutlined, EyeOutlined, HeartOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import type { AIPerson } from '../types';

interface PersonCardProps {
  person: AIPerson;
  onClick: (id: number) => void;
}

// AI人员卡片组件
const PersonCard: React.FC<PersonCardProps> = ({ person, onClick }) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [liked, setLiked] = useState(false);

  // 获取人物类型标签颜色
  const getTypeColor = (age: number) => {
    if (age < 20) return 'pink';
    if (age < 25) return 'blue';
    if (age < 30) return 'purple';
    return 'orange';
  };

  // 截取描述文本
  const getShortDescription = (desc: string, maxLength = 60) => {
    if (desc.length <= maxLength) return desc;
    return desc.substring(0, maxLength) + '...';
  };

  const handleCardClick = (e: React.MouseEvent) => {
    // 防止按钮点击触发卡片点击
    if ((e.target as HTMLElement).closest('.card-action-btn')) {
      return;
    }
    onClick(person.id);
  };

  const handleLike = (e: React.MouseEvent) => {
    e.stopPropagation();
    setLiked(!liked);
  };

  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick(person.id);
  };

  const handlePreview = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log('预览AI人员:', person.id);
  };

  return (
    <Card
      hoverable
      className="h-full shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105 border-0 overflow-hidden group"
      bodyStyle={{ padding: '0' }}
      onClick={handleCardClick}
    >
      {/* 封面图片区域 */}
      <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center" style={{ height: '320px' }}>
        {!imageLoaded && (
          <div className="absolute inset-0 bg-gray-200 animate-pulse flex items-center justify-center">
            <span className="text-gray-400">加载中...</span>
          </div>
        )}
        {/* 封面  */}
        <img
          alt={person.username}
          src={person.image}
          className={`max-w-full max-h-full object-contain transition-all duration-500 ${imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-110'
            } group-hover:scale-105`}
          style={{ aspectRatio: '9/16' }}
          onLoad={() => setImageLoaded(true)}
          onError={(e) => {
            e.currentTarget.src = 'https://via.placeholder.com/180x320?text=图片加载失败';
          }}
        />

        {/* 顶部标签 */}
        {/* <div className="absolute top-3 left-3">
          <Tag color={getTypeColor(person.age)} className="font-medium">
            {person.age}岁
          </Tag>
        </div> */}

        {/* 操作按钮 */}
        <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <Space>
            <Tooltip title="预览">
              <Button
                type="primary"
                shape="circle"
                size="small"
                icon={<EyeOutlined />}
                className="card-action-btn bg-blue-500 border-blue-500"
                onClick={handlePreview}
              />
            </Tooltip>
            <Tooltip title="编辑">
              <Button
                type="primary"
                shape="circle"
                size="small"
                icon={<EditOutlined />}
                className="card-action-btn bg-green-500 border-green-500"
                onClick={handleEdit}
              />
            </Tooltip>
          </Space>
        </div>

        {/* 渐变遮罩 */}
        <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />

        {/* 喜欢按钮 */}
        <div className="absolute bottom-3 right-3">
          <Button
            type="text"
            shape="circle"
            icon={<HeartOutlined />}
            className={`card-action-btn text-white hover:text-red-400 ${liked ? 'text-red-400' : ''
              }`}
            onClick={handleLike}
          />
        </div>
      </div>

      {/* 内容区域 */}
      <div className="p-4">
        {/* 头像和基本信息 */}
        <div className="flex items-start space-x-3 mb-3">
          <div className="flex-shrink-0">
            {/* 头像  */}
            <img
              src={person.avatar}
              alt={`${person.username}的头像`}
              className="w-14 h-14 rounded-full object-cover object-center border-3 border-white shadow-lg ring-2 ring-gray-100"
              style={{ objectPosition: 'center 20%' }}
              onError={(e) => {
                e.currentTarget.src = 'https://via.placeholder.com/56x56?text=头像';
              }}
            />
          </div>
          <div className="flex-1 min-w-0">
            <Tooltip title={person.username}>
              <h3 className="font-bold text-lg text-gray-900 truncate hover:text-blue-600 transition-colors">
                {person.username}
              </h3>
            </Tooltip>
            <div className="flex items-center gap-2 mt-1">
              <Tag color="geekblue" className="text-xs">
                ID: {person.id}
              </Tag>

              {/* 评分  */}
              {/* <div className="flex items-center text-gray-500 text-xs">
                <StarOutlined className="mr-1" />
                <span>4.8</span>
              </div> */}
            </div>
            {/* 名字 */}
            <div>
              <Tag color="geekblue" className="text-xs">
                {person.username}
              </Tag>
            </div>
          </div>
        </div>

        {/* 描述信息 */}
        <div className="mb-3">
          <Tooltip title={person.description} placement="bottom">
            <p className="text-sm text-gray-600 leading-relaxed line-clamp-2">
              {getShortDescription(person.description)}
            </p>
          </Tooltip>
        </div>

        {/* 底部统计信息 */}
        <div className="flex items-center justify-between pt-2 border-t border-gray-100">
          <div className="flex items-center gap-4 text-xs text-gray-500">
            <div className="flex items-center gap-1">
              <HeartOutlined />
              <span>128</span>
            </div>
            <div className="flex items-center gap-1">
              <MessageOutlined />
              <span>45</span>
            </div>
            <div className="flex items-center gap-1">
              <EyeOutlined />
              <span>1.2k</span>
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default PersonCard; 